<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta th:name="_csrf" th:content="${_csrf.token}"/>
		<!-- 默认的header name是X-CSRF-TOKEN -->
		<meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
		<title></title>
		<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
		<link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/css/fileinput.min.css" rel="stylesheet">

		<script th:src="@{/static/assets/js/jquery.min.js}"></script>
		<script th:src="@{/static/component/pear/module/tinymce/tinymce.js}"></script>
		<script th:src="@{/static/component/layui/layui.js}"></script>
		<script th:src="@{/static/component/pear/pear.js}"></script>
		<link rel="stylesheet" th:href="@{/static/component/pear/css/pear.css}"/>

		<!-- 如果你想在上传之前修改图片大小需要加入canvas-to-blob.min.js  它必须在fileinput.min.js之前引入 -->
		<script src="https://cdn.bootcss.com/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.js"></script>

		<!-- 如果你想在最初的预览中排序/重新排列需要引入sortable.min.js  它必须在fileinput.min.js之前引入 -->
		<script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/plugins/sortable.min.js"></script>

		<!-- 如果你想在HTML文件预览中净化HTML内容则要引入purify.min.js is  它必须在fileinput.min.js之前引入 -->
		<script src="https://cdn.bootcss.com/dompurify/1.0.10/purify.min.js"></script>

		<!-- 主要的 fileinput 插件库 -->
		<script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/fileinput.min.js"></script>

		<!-- 如果你想在放大的模态页面中查看文件详细信息需要引入bootstrap.js -->
		<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

		<!-- 可选，如果你需要像font awesome 这样的主题，就像下面的代码一样引入它 -->
		<script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/locales/fa.min.js"></script>

		<!-- 可选，如果你需要转换语言或翻译，就包含这个库 -->
		<script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/locales/zh.min.js"></script>


		<style>
			h1{
				margin-top: 200px;
				color: #5FB878;
			}
			.layui-card-body{
				height: 150px;
			}
			#btns{
				width: 360px;
				height: 38px;
				margin-left: 900px;
			}

			.layui-input, .layui-textarea{
				display: inline;
			}


		</style>
	</head>
	<body class="pear-container">
	<div class="layui-row layui-col-space10">
		<form method="post" th:action="@{'/pear'+${url}}" id="global-form" enctype="multipart/form-data" class="form-horizontal">
		<div class="layui-col-md12">

			<div class="layui-card">
				<div class="layui-card-body" style="height: 470px">
					<input type="hidden" name="editProductId" id="editProductId">
					<span style="color: green;font-size: 22px" th:text="${ps}"></span>
					<br/>
					&nbsp;&nbsp;商品名称：
					<input id="name" name="name" class="layui-input" type="text" style="width: 34%" required>
					&nbsp;&nbsp;品牌选择:
					<select id="brandid" th:if="${curBrand eq null}" name="brandid" lay-verify="" class="layui-input layui-unselect" style="width: 12%">
								<option value="-1">请选择一个品牌</option>
								<option th:each="brand:${brandList}" th:text="${brand.getBrandName()}" th:value="${brand.getId()}"></option>
					</select>
					<select id="brandid" th:if="${curBrand ne null}" name="brandid" lay-verify="" class="layui-input layui-unselect" style="width: 12%">
						<option th:value="${curBrand.getId()}" th:text="${curBrand.getBrandName()}"></option>
						<option th:each="brand:${brandList}" th:text="${brand.getBrandName()}" th:value="${brand.getId()}">
						</option>

					</select>
					&nbsp;&nbsp;分类选择:
					<select id="classifyid" name="classifyid" th:if="${curClassify eq null}" lay-verify="" class="layui-input layui-unselect" style="width: 12%">
						<option value="-1">请选择一个分类</option>
						<option th:each="classify:${classifyList}" th:text="${classify.getText()}" th:value="${classify.getId()}"></option>
					</select>
					<select id="classifyid" name="classifyid" th:if="${curClassify ne null}" lay-verify="" class="layui-input layui-unselect" style="width: 12%">
						<option th:value="${curClassify.getId()}" th:text="${curClassify.getText()}"></option>
						<option th:each="classify:${classifyList}" th:text="${classify.getText()}" th:value="${classify.getId()}"></option>
					</select>
					&nbsp;&nbsp;商品价格:
					<input id="price" name="price" th:if="${price eq null}" class="layui-input" type="text" style="width: 12%" required>
					<input id="price" name="price" th:if="${price ne null}" th:value="${price}" class="layui-input" type="text" style="width: 12%" required>
					元
					<br/>
					&nbsp;&nbsp;商品数量:
					<input id="number" name="number" th:if="${number eq null}" class="layui-input" type="text" style="width: 12%" required>
					<input id="number" name="number" th:if="${number ne null}" th:value="${number}" class="layui-input" type="text" style="width: 12%" required>
					件
					<br/>
					&nbsp;&nbsp;商品图片：
					<div
						 class="layui-input-block" style="width: 25%">
						<input id="uploadPicture"
							   name="file" type="file"
							   multiple=true class="file-loading">
					</div>


				</div>
			</div>
		</div>
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-header"><span style="color: green;font-size: 15px;">商品介绍编辑器</span></div>
				<div class="layui-card-body">
					<textarea name="ct" id="edit" cols="30" rows="10" required></textarea>
					<div id="btns">

						<div class="layui-btn-group layui-btn-primary" style="margin-top: 10px">
							<button lay-submit lay-filter="submit03" class="layui-btn layui-btn-radius" target="_blank">返回列表</button>
						</div>
						<div th:if="${ps} ne '修改商品'" class="layui-btn-group" style="margin-top: 10px">
							<button lay-submit lay-filter="submit02" class="layui-btn layui-btn-warm layui-btn-radius" target="_blank">放入草稿</button>
						</div>
						<div class="layui-btn-group" style="margin-top: 10px">
							<button  lay-submit lay-filter="submit01" class="layui-btn layui-btn-radius" target="_blank" th:text="${ps}"></button>
						</div>
					</div>

				</div>
			</div>
		</div>
		</form>

	</div>
	<script th:inline="javascript">
		var myedit=null;
		// 获取<meta>标签中封装的_csrf信息 ,否则会请求403
		var token = $("meta[name='_csrf']").attr("content");
		var header = $("meta[name='_csrf_header']").attr("content");
		var headers = {"X-CSRF-TOKEN": token}

		layui.use(['tinymce'], function() {
			var tinymce = layui.tinymce
			var edit = tinymce.render({
				elem: "#edit",
				height: 400
			});
			myedit=edit;
		});

		setTimeout(() => {
			//编辑商品的数据填充
			var productContent=[[${contents}]];
			if(productContent!=null){
				$('#editProductId').val(productContent.productId);
				$('#name').val(productContent.name);
				tinymce.activeEditor.setContent(productContent.content);
			}
		}, 850);


		setTimeout(() => {

			layui.use('form', function(){
				var form = layui.form;

				if($('#editProductId').val().length==0) {
					form.on('submit(submit01)', function (data) {
						layer.confirm('您确定要发布吗?', {
							icon: 3,
							title: '提示'
						}, function (index) {
							layer.close(index);
							let loading = layer.load();
							var data = new FormData($('#global-form')[0]);
							data.append('content',myedit.getContent());

							if($('#brandid').val()=='-1'||$('#classifyid').val()=='-1'
									||$('#price').val()==''||$('#number').val()=='')
							{
								layer.msg('请把信息填写完整,发布失败!', {
									icon: 2,
									time: 1000
								});
								layer.close(loading);
							}else {
								$.ajax({
									url: "/pear/product/publish",
									data: data,  //ajax提交表单
									dataType: 'json',
									type: 'POST',
									headers: headers,
									async:false,
									processData: false,
									contentType: false,
									success: function (result) {
										layer.close(loading);
										if (result.success) {
											layer.msg(result.msg, {
												icon: 1,
												time: 1000
											});
										} else {
											layer.msg(result.msg, {
												icon: 2,
												time: 1000
											});
										}
									}
								})

							}


						})
						return false;
					});

					form.on('submit(submit03)', function (data) {
						window.location.href='/pear/toArticleManager'
					});


				}else {
					form.on('submit(submit01)', function (data) {
						layer.confirm('您确定要修改吗?', {
							icon: 3,
							title: '提示'
						}, function (index) {
							layer.close(index);
							var data = new FormData($('#global-form')[0]);
							data.append('content',myedit.getContent());
							data.append('editProductid',document.getElementById('editProductId').value)
							let loading = layer.load();

							if($('#brandid').val()=='-1'||$('#classifyid').val()=='-1'
									||$('#price').val()==''||$('#number').val()=='')
							{
								layer.msg('请把信息填写完整,修改失败!', {
									icon: 2,
									time: 1000
								});
								layer.close(loading);
							}else {

								$.ajax({
									url: "/pear/modifyProduct",
									data: data,  //ajax提交表单
									dataType: 'json',
									type: 'POST',
									headers: headers,
									async: false,
									processData: false,
									contentType: false,
									success: function (result) {
										layer.close(loading);
										if (result.success) {
											layer.msg(result.msg, {
												icon: 1,
												time: 1000
											});
										} else {
											layer.msg(result.msg, {
												icon: 2,
												time: 1000
											});
										}
									}
								})
							}
						})

						return false;
					});

					form.on('submit(submit03)', function (data) {
						window.history.go(-1);  //返回上一页
					});

				}

				form.on('submit(submit02)', function (data) {
					layer.confirm('您确定要放入草稿箱吗?', {
						icon: 3,
						title: '提示'
					}, function (index) {
						layer.close(index);
						var data = new FormData($('#global-form')[0]);
						data.append('content',myedit.getContent());

							let loading = layer.load();
							$.ajax({
								url: "/pear/add/draft",
								data: data,  //ajax提交表单
								dataType: 'json',
								type: 'POST',
								headers: headers,
								async:false,
								processData: false,
								contentType: false,
								success: function (result) {
									layer.close(loading);
									if (result.success) {
										layer.msg(result.msg, {
											icon: 1,
											time: 1000
										});
										window.location.href='/pear/toDraft'
									} else {
										layer.msg(result.msg, {
											icon: 2,
											time: 1000
										});
									}
								}
							})


					})
					return false;
				});


				//图片上传
				$(function () {
					$("#uploadPicture").fileinput({
						uploadUrl: "/pear/product/publish",
						previewFileType: "image",
						uploadAsync: true,
						showCaption: false,
						allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp"],
						enctype: 'multipart/form-data',
						//隐藏上传按钮
						showUpload: false,
						//最大上传文件数量
						maxFileCount: 1,
						maxFileSize: 3072,
						showBrowse: true,
						dropZoneTitle: '拖拽头像图片到这里...',
						browseLabel: "选择图片",
						uploadClass: "btn btn-info",
						uploadLabel: "上传",
						removeClass: "btn btn-danger",
						autoReplace: true,
						removeLabel: "移除",
						msgSizeTooLarge: '图片文件太大！',
						msgFilesTooMany: "选择上传的文件数量为({n}) 超过允许的最大数值({m})！",
						msgUploadEnd: '图片上传成功！',
						msgUploadBegin: '初始化中...',
						msgZoomModalHeading: '图片详情预览',
						msgInvalidFileExtension: '非法文件扩展名 "{name}"！ 仅支持 "{extensions}" 的文件扩展名！'
					}).on('fileerror', function (event, data, msg) {
						alert('图片上传失败！' + msg);
					}).on('fileuploaded', function (event, data) {
						$("#picName").val(data.response.name);
						$('#uploadPicture').fileinput('disable');
					}).on('fileclear', function (event) {
						alert("图片被清除啦！");
					});

				});







			});


		}, 900);







	</script>
	</body>




</html>
